<template>
    <div class="login_container">
        <el-row>
            <!-- :xs是栅格系统，屏幕宽度<=768时 -->
            <el-col :span="12" :xs="0"></el-col>
            <el-col :span="12" :xs="24">
                <el-form class="login_form" :model="logInfo">
                    <h1>Hello</h1>
                    <h2>欢迎来到财悦家系统</h2>
                    <el-form-item prop="username">
                        <el-input :prefix-icon="User" v-model="logInfo.username" 
                        placeholder="请输入用户名/邮箱"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" :prefix-icon="Lock" v-model="logInfo.password" 
                        placeholder="请输入密码"    show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="login_button" @click="login(logInfo)">登录</el-button>
                    </el-form-item>
                    <router-link to="/register" class="reg_link">没有账号？点击注册</router-link>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { User, Lock } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue';
// 引入用户仓库
import useUserStore from '@/store/modules/user';
// 引入路由
import router from '@/router/index';
// 引入报错时的提示信息
import { ElNotification } from 'element-plus';
import {UserInfo} from '@/types/user'
let loading = ref(false)

let useStore = useUserStore()

let logInfo = reactive<UserInfo>({
    username: '',
    password: ''
})


const login = async (logInfo: any) => {
    loading.value = true
    try {
        await useStore.userLogin(logInfo)
        console.log('进入首页')
        router.push('/')
        ElNotification({
            type: 'success',
            title: `Hi,你好`,
            message: '欢迎回来'
        })
    } catch (error) {
        console.dir(error)
        ElNotification({
            type: 'error',
            message: (error as Error).message
        })
    }
}
</script>

<style scoped lang="scss">
.login_container {
    width: 100%;
    height: 100vh;
    background: url('@/assets/img/qianling.jpg') no-repeat;
    background-size: cover;

    h1 {
        font-size: 52px;
        color: #fff;
    }

    h2 {
        margin: 20px 0;
        font-size: 20px;
        color: #fff;
    }

    .login_form {
        width: 80%;
        margin-top: 200px;
        padding: 20px;
        background: rgba(96, 180, 249, 0.3);
        border-radius: 10px;

        .login_button {
            width: 100%;
            background-color: rgb(104, 202, 248);

        }
        .reg_link {
            color:#e0e0e0;
            text-decoration: underline;
        }
        .reg_link:hover {
            color:rgb(27, 209, 255);
        }
    }
}
</style>